<style>
.detail_img{
    width: 100%;
    display: flex;
    justify-content: center;
    height: 200px;
}
.detail_img img{
    object-fit: cover;
    height: 100%;
}
</style>
<template>
    <div>
        <Row type="flex" justify="center" align="middle">
            <Col span="24">
                <Form ref="searchForm" :model="searchData" inline>
                  <Col span="20">
                      <Form-item prop="wname">
                          <Input type="text" style="width:150px" v-model="searchData.company" placeholder="企业名称">
                          </Input>
                      </Form-item>
                      <Form-item prop="telno">
                          <Input type="text" style="width:150px" v-model="searchData.wname" placeholder="用户名">
                          </Input>
                      </Form-item>
                      <Form-item prop="telno">
                          <Input type="text" style="width:150px" v-model="searchData.telno" placeholder="联系电话">
                          </Input>
                      </Form-item>
                      <Form-item prop="isactive">
                          <Select v-model="searchData.isactive" style="width:100px" placeholder="状态">
                            <Option value="">全部</Option>
                              <Option value="0">{{ $t('isactive_0') }}</Option>
                              <Option value="1">{{ $t('isactive_1') }}</Option>
                          </Select>
                      </Form-item>
                      <Form-item prop="ispass">
                          <Select v-model="searchData.ispass" style="width:100px" placeholder="审核状态">
                              <Option value="">全部</Option>
                              <Option value="0">{{ $t('ispass_0') }}</Option>
                              <Option value="1">{{ $t('ispass_1') }}</Option>
                              <Option value="2">{{ $t('ispass_2') }}</Option>
                          </Select>
                      </Form-item>
                      <Form-item prop="createdate">
                          <Date-picker v-model="searchData.createdate" format="yyyy-MM-dd HH:mm:ss" type="datetimerange" placement="bottom-end"
                          placeholder="选择日期" style="width: 400px" @on-change="createdateChange"></Date-picker>
                      </Form-item>
                      <Form-item>
                            <Button type="primary" @click="search">搜索</Button>
                      </Form-item>
                  </Col>
                </Form>
                <Col span="24">
                  <Button type="primary" @click="passsuccess">批量审核通过</Button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <Button type="warning" @click="setpassfailinfo">批量审核失败</Button>
                </Col>
            </Col>
            <Col span="24">
                <Table :columns="column" :data="list"  @on-selection-change="setpasslistchange"></Table>
                <Page :total="pagedata.total" size="small" :current="pagedata.current" :page-size="pagedata.pageSize" :page-size-opts="pagedata.pageSizeOpts"
                    @on-change="pageChange" @on-page-size-change="sizeChange"
                show-elevator show-sizer show-total></Page>
            </Col>
        </Row>
        <Modal v-if="detail" v-model="updatedetail" title="修改" width="1000">
            <Row>
                <Col span="12">
                    <Form :model="detail" :label-width="80">
                        <Form-item label="公司名称">
                            <Input v-model="detail.company" placeholder="公司名称"></Input>
                        </Form-item>
                        <Form-item label="法人">
                            <Input v-model="detail.legalperson" placeholder="法人"></Input>
                        </Form-item>
                        <Form-item label="联系电话">
                            <Input v-model="detail.telno" placeholder="联系电话"></Input>
                        </Form-item>
                    </Form>
                </Col>
                <Col span="12" >
                    <div class="detail_img" v-viewer>
                      <img v-for="src in [detail.licensephoto]" :key="src" :src="src">
                    </div>
                    <!--<viewer :images="images">
                      <img v-for="src in images" :key="src" :src="src">
                    </viewer>-->
                    <!-- api -->
                    <!--<button type="button" @click="show">Click to show</button>
                    <img :src="detail.licensephoto"  alt="营业执照" />-->
                </Col>
            </Row>
            <div slot="footer">
                <Button type="success"  @click="saveinfo">保存</Button>
                &nbsp;&nbsp;&nbsp;
                <Button type="error"  @click="resetinfo">重置</Button>
            </div>
        </Modal>
        <Modal v-if="logs" v-model="showlog" title="日志" width="1000">
            <Table :columns="column2" :data="logs"></Table>
                <Page :total="pagedata2.total" size="small" :current="pagedata2.current"
                    :page-size="pagedata2.pageSize" :page-size-opts="pagedata2.pageSizeOpts"
                    @on-change="pageChange2" @on-page-size-change="sizeChange2"
                    show-elevator show-sizer show-total>
                </Page>
        </Modal>
         <Modal v-model="ispassfail" title="审核失败">
            <Input v-model="passfailinfo" type="textarea" :rows="4" placeholder="审核失败原因"></Input>
            <div slot="footer">
                <Button type="success"  @click="passfail">保存</Button>
                &nbsp;&nbsp;&nbsp;
                <Button type="error"  @click="closepassfailmodel">取消</Button>
            </div>
         </Modal>
    </div>
</template>
<script>
import { getlistbywhere, updateispassbyid, updateisactivebyid, getinfobyid, updateinfo, getlogs } from '@/api/user'
export default {
  name: 'companylist',
  data () {
    var self = this

    return {
      ispassfail: false,
      passfailinfo: '',
      selectmore: false,
      updatedetail: false,
      showlog: false,
      detail: {},
      wuid: this.$store.state.user.userId,
      list: [],
      logs: [],
      column: [
        {
          type: 'selection',
          width: 40,
          align: 'center'
        },
        {
          title: 'ID',
          key: 'id',
          width: 80
        },
        {
          title: '企业名称',
          key: 'company',
          width: 150
        },
        {
          title: '法人',
          key: 'legalperson',
          width: 100
        },
        {
          title: '联系电话',
          key: 'telno',
          sortable: true,
          width: 150
        },
        {
          title: '用户名',
          key: 'wname',
          width: 100
        },
        /* {
          title: '状态',
          key: 'isactive',
          width: 160,
          render: function (h, params) {
            const active = self.$t('isactive_' + params.row.isactive)
            const pass = self.$t('ispass_' + params.row.ispass)
            const html = '<p>发布状态：' + active + '</p><p>审核状态：' + pass + '</p>'
            var div = h('div', {
              domProps: {
                innerHTML: html
              }
            })
            return div
          }
        }, */
        {
          title: '可用状态',
          key: 'isactive',
          width: 200,
          render: function (h, params) {
            var btns = []
            const active = self.$t('isactive_' + params.row.isactive)
            const html = active
            var div = h('span', {
              domProps: {
                innerHTML: html
              }
            })
            var btn3 = h('Button', {
              props: {
                type: 'warning',
                size: 'small'
              },
              on: {
                click: (data) => {
                  self.setactive(params.row, 0)
                }
              }
            }, '关闭')
            var btn4 = h('Button', {
              props: {
                type: 'success',
                size: 'small'
              },
              on: {
                click: (data) => {
                  self.setactive(params.row, 1)
                }
              }
            }, '开启')
            btns.push(div)
            if (params.row.isactive == 1) {
              btns.push(btn3)
            } else {
              btns.push(btn4)
            }
            return btns
          }
        },
        {
          title: '审核状态',
          key: 'ispass',
          width: 200,
          render: function (h, params) {
            var btns = []
            const pass = self.$t('ispass_' + params.row.ispass)
            const html = pass
            var div = h('span', {
              domProps: {
                innerHTML: html
              }
            })
            btns.push(div)
            return btns
          }
        },
        {
          title: '创建时间',
          key: 'createtime',
          render: function (h, params) {
            const createtime = params.row.createtime ? params.row.createtime : ''
            const passtime = params.row.passtime ? params.row.passtime : ''
            const html = '<p>创建时间：' + createtime + '</p><p>审核时间：' + passtime + '</p>'
            var div = h('div', {
              domProps: {
                innerHTML: html
              }
            })
            return div
          }
        },
        {
          title: '操作',
          key: 'option',
          align: 'left',
          width: 200,
          render: function (h, params) {
            var btn2 = h('Button', {
              props: {
                type: 'text',
                size: 'small'
              },
              on: {
                click: (data) => {
                  self.updateinfo(params.row.id)
                }
              }
            }, '修改')
            var btn5 = h('Button', {
              props: {
                type: 'text',
                size: 'small'
              },
              on: {
                click: (data) => {
                  self.showloglist(params.row.id)
                }
              }
            }, '日志')
            var btns = []
            btns.push(btn5)
            if (params.row.ispass != 1) {
              btns.push(btn2)
            }
            return btns
          }
        }
      ],
      column2: [
        {
          title: '操作人',
          key: 'username',
          width: 100
        },
        {
          title: '备注',
          key: 'node'
        },
        {
          title: 'IP',
          key: 'ip',
          width: 120
        },
        {
          title: '操作时间',
          key: 'createtime',
          width: 160
        }
      ],
      searchData: {
        company: '',
        wname: '',
        telno: '',
        isactive: '',
        ispass: '',
        createdate: []
      },
      pagedata: {
        total: 10,
        current: 1,
        pageSize: 10,
        pageSizeOpts: [10, 50, 100]
      },
      pagedata2: {
        total: 10,
        current: 1,
        pageSize: 10,
        pageSizeOpts: [10, 50, 100]
      },
      passlist: []
    }
  },
  methods: {
    search () {
      this.pagedata.current = 1
      this.getList()
    },
    getList () {
      this.searchData.page = this.pagedata.current
      this.searchData.size = this.pagedata.pageSize
      getlistbywhere(this.searchData).then(res => {
        const data = res.data
        if (data.code !== 200) {
          this.$Message.error(data.msg)
          this.list = []
          this.pagedata.total = 0
          this.pagedata.current = 1
        } else {
          const usedata = data.data
          this.pagedata.total = usedata.count
          this.list = usedata.list
        }
      })
    },
    pageChange (current) {
      this.pagedata.current = current
      this.getList()
    },
    sizeChange (pageSize) {
      this.pagedata.pageSize = pageSize
      this.pagedata.current = 1
      this.getList()
    },
    pageChange2 (current) {
      this.pagedata2.current = current
      this.getlogs()
    },
    sizeChange2 (pageSize) {
      this.pagedata2.pageSize = pageSize
      this.pagedata2.current = 1
      this.getlogs()
    },
    passsuccess () {
      if (this.passlist.length <= 0) {
        this.$Message.error('无提交数据')
        return false
      }
      const idlist = this.passlist
      const ispass = 1
      const wuid = this.wuid
      updateispassbyid({ idlist, ispass, wuid }).then(res => {
        const data = res.data
        if (data.code !== 200) {
          this.$Message.error(data.msg)
        } else {
          this.getList()
        }
      })
    },
    passfail  () {
      if (this.passlist.length <= 0) {
        this.$Message.error('无提交数据')
        return false
      }
      const idlist = this.passlist
      const ispass = 2
      const wuid = this.wuid
      const node = this.passfailinfo
      updateispassbyid({ idlist, ispass, wuid, node }).then(res => {
        const data = res.data
        if (data.code !== 200) {
          this.$Message.error(data.msg)
        } else {
          this.getList()
          this.closepassfailmodel()
        }
      })
    },
    setactive (data, isactive) {
      console.log(data)
      const wuid = this.wuid
      const id = data.id
      updateisactivebyid({ id, isactive, wuid }).then(res => {
        const data = res.data
        if (data.code === 200) {
          this.$Message.success('操作成功')
          this.getList()
        } else {
          this.$Message.error(data.msg)
        }
      })
    },
    setpasslistchange (selection) {
      if (selection.length >= 0) {
        this.passlist = []
      }
      for (var j = 0, len = selection.length; j < len; j++) {
        this.passlist.push(selection[j].id)
      }
    },
    /* showdetailinfo (id) {
      getinventinfo(id).then(res => {
        const data = res.data
        if (data.code !== 200) {
          this.$Message.error(data.msg)
        } else {
          const usedata = data.data
          this.detailinfo = usedata
          this.showdetail = true
        }
      })
    }, */
    showloglist (id) {
      const data = {
        refid: id,
        type: '8,9,10'
      }
      getlogs(data).then(res => {
        const data = res.data
        if (data.code !== 200) {
          this.$Message.error(data.msg)
          this.logs = []
          this.pagedata2.total = 0
          this.pagedata2.current = 1
        } else {
          const usedata = data.data
          this.pagedata2.total = usedata.count
          this.logs = usedata.list
          this.showlog = true
        }
      })
    },
    updateinfo (id) {
      getinfobyid({ id }).then(res => {
        const data = res.data
        if (data.code === 200) {
          this.updatedetail = true
          this.detail = data.data
        } else {
          this.$Message.error(data.msg)
        }
      })
    },
    saveinfo () {
      this.detail.wuid = this.wuid
      updateinfo(this.detail).then(res => {
        const data = res.data
        if (data.code !== 200) {
          this.$Message.error(data.msg)
        } else {
          this.getList()
          this.updatedetail = false
        }
      })
    },
    resetinfo () {
      const id = this.detail.id
      getinfobyid({ id }).then(res => {
        const data = res.data
        if (data.code === 200) {
          this.detail = data.data
        } else {
          this.$Message.error(data.msg)
        }
      })
    },
    createdateChange (values) {
      this.searchData.createdate = values
    },
    show () {
      this.$viewerApi({
        images: this.images
      })
    },
    setpassfailinfo () {
      this.ispassfail = true
    },
    closepassfailmodel () {
      this.ispassfail = false
      this.passfailinfo = ''
    }
  },
  mounted () {
    this.getList()
  }
}
</script>
